<%= render "discord_header", tab: :discord_server_roles do %>
  <div class="mx-auto mt-6 max-w-6xl px-5">
    <div class="rounded-xl border border-gray-200 bg-gray-50">
      <div class="sticky top-0 bg-gray-50 flex flex-wrap items-center justify-between gap-5 border-b border-gray-200 p-4">
        <div>
          <h2 class="text-lg font-semibold"><%= t(".review_changes.title") %></h2>
          <p class="text-sm text-gray-400 font-medium"><%= t(".review_changes.warn") %></p>
        </div>
        <div class="flex gap-4">
          <%= link_to t(".cancel_sync"), discord_server_roles_school_path, class: "rounded-lg border border-gray-200 bg-gray-100 px-5 py-3 text-sm font-medium text-gray-500 transition hover:bg-white" %>
          <%= button_to t(".confirm_sync"), discord_sync_roles_school_path(confirmed: "yes"), method: :post, class: "border-primary-200 bg-primary-100 text-primary-500 hover:bg-primary-200 rounded-lg border px-5 py-3 text-sm font-medium transition" %>
        </div>
      </div>
      <div class="grid grid-cols-2">
        <div class="border-e border-gray-200 p-4">
          <h3 class="text-sm font-semibold"><%= t(".saved_roles_on_lms") %></h3>
          <div class="mt-3 flex flex-col gap-2">
            <% @sync_service.cached_roles.each do |role| %>
              <div class="flex items-center justify-between gap-1.5 rounded-lg border border-gray-100 <%= role.will_be_deleted ? "bg-red-100" : "bg-white" %> p-3">
                <div class="flex items-center gap-1.5">
                  <div style="background-color: <%= role.color_hex %>;" class="h-3 w-3 rounded-full" aria-hidden="true"></div>
                  <p class="text-sm font-medium"><%= role.name %></p>
                </div>
                <% if role.will_be_deleted %>
                  <p class="text-xs text-red-500 text-end font-semibold"><%= t(".will_be_deleted_from_lms") %></p>
                <% end %>
              </div>
            <% end %>
          </div>
        </div>
        <div>
          <div class="p-4">
            <div class="flex items-center gap-2">
              <h3 class="text-sm font-semibold"><%= t(".roles_on_discord") %></h3>
            </div>
            <div class="mt-3 flex flex-col gap-2">
              <% @sync_service.fetched_roles.each do |role| %>
                <div class="flex items-center justify-between gap-1.5 rounded-lg border border-gray-100 <%= role.will_be_added ? "bg-green-100" : "bg-white" %> p-3">
                  <div class="flex items-center gap-1.5">
                    <div style="background-color: <%= role.color_hex %>;" class="h-3 w-3 rounded-full" aria-hidden="true"></div>
                    <p class="text-sm font-medium"><%= role.name %></p>
                  </div>
                  <% if role.will_be_added %>
                    <p class="text-xs text-green-500 text-end font-semibold"><%= t(".will_be_saved_to_lms") %></p>
                  <% end %>
                </div>
              <% end %>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
<% end %>
